// pages/game/game.js

/*全局变量1.2.3.*/
//1.方块的初始位置
var num=[
  ['00','01','02'],
  ['10','11','12'],
  ['20','21','22']
]
//2.方块的宽度
var w = 100  
//3.图片的初始地址
var url = '/images/pic01.jpg'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isWin:false
  },

  /**
   * 自定义函数--绘制画布内容
   */
  drawCanvas: function () {
    //重新保存画笔为ctx
    let ctx = this.ctx
    //清空画布
    ctx.clearRect(0,0,300,300) //300*300
    
    //双重for循环绘制3*3拼图
    for(var i=0;i<3;i++){
      for(var j=0;j<3;j++){
        if(num[i][j]!='22'){                //不是空白方块才绘制
          var row = parseInt(num[i][j]/10)  //tips: 获取行(除10即取十位数,并强制转为数字)
          var col = num[i][j]%10            //tips: 获取列(取10的余数,即个位数)

          //绘制方块
            //(url,col*w,row*w,w,w,j*w,i*w)
            //(图片路径,小方块的位置,小方块的宽高,小方块画在什么位置,缩放的大小(跟原图一样所以为w,w))
          ctx.drawImage(url,col*w,row*w,w,w,j*w,i*w,w,w)
        }
      }
    }
    ctx.draw() //绘制
  },

  /**
   * 自定义函数--随机打乱方块顺序
   */
  shuffle: function () {
    //先让所有方块回归初始位置
    num=[
      ['00','01','02'],
      ['10','11','12'],
      ['20','21','22']
    ]
    //记录当前空白方块的行和列 (22)
    var row = 2
    var col = 2

    //随机打乱方块100次
    for(var i=0;i<100;i++){
      //随机生成一个方向: 上0,下1,左2,右3
      var direction = Math.round(Math.random()*3) //四舍五入后得到0~3

      //上:0
      if(direction==0){
        //空白方块不能在最上面一行
        if(row!=0){ //只要空白方块不是在最上一样,就可以交换位置
          //交换位置
          //空白方块   换成  上面一行的方块
          num[row][col] = num[row-1][col]
          num[row-1][col] = '22' //让上面一行成为空白方块
          //更新空白方块的行
          row -= 1 //同 row = row - 1
        }
      }

      //下:1
      else if(direction==1){
        //空白方块不能在最下面一行
        if(row!=2){
          //交换位置
          num[row][col] = num[row+1][col]
          num[row+1][col] = '22'
          //更新空白方块的行
          row += 1 //同 row = row + 1
        }
      }

      //左:2
      else if(direction==2){
        //空白方块不能在最左一列
        if(col!=0){
          //交换位置
          num[row][col] = num[row][col-1]
          num[row][col-1] = '22'
          //更新空白方块的列
          col -= 1 //同 col = col - 1
        }
      }

      //右:3
      else if(direction==3){
        //空白方块不能在最右一列
        if(col!=2){
          //交换位置
          num[row][col] = num[row][col+1]
          num[row][col+1] = '22'
          //更新空白方块的列
          col += 1 //同 col = col + 1
        }
      }
    }
  },

  /**
   * 自定义函数--监听点击方块事件
   */
  touchBox: function (e) {
    //console.log(e)
    //如果游戏已经成功了, 不做任何操作
    if(this.data.isWin){ //或if(this.isWin()){}
      //终止本函数
      return
    }
    //console.log(e.changedTouches)
    //获取被点击方块的坐标x和y
    var x = e.changedTouches[0].x
    var y = e.changedTouches[0].y
    //console.log('x:'+x+',y:'+y)

    //换算成行和列
    var row = parseInt(y/w) //0~100之间都是
    var col = parseInt(x/w) //0~100之间都是

    //如果点击的不是空白位置
    if(num[row][col]!='22'){
      //尝试移动方块
      this.moveBox(row,col)

      //重新绘制画布内容
      this.drawCanvas()

      //判断游戏是否成功
      if(this.isWin()){
        //在画面上绘制提示语句
        let ctx = this.ctx

        //绘制完整图片
        ctx.drawImage(url,0,0)

        //绘制文字提示
        ctx.setFillStyle('#E64340')
        ctx.setTextAlign('center')
        ctx.setFontSize(60)
        
        ctx.fillText('游戏成功',150,150) //放在中心点
        ctx.draw()
      }

    }
  },//touchBox()结束

  /**
   * 自定义函数--移动被点击的方块
   */
  moveBox: function (i,j) {
    //情况1: 如果被点击的方块不在最上方,检查可否上移
    if( i > 0 ){//也可用 (i!=0)
      //如果方块的上方是空白
      if(num[i-1][j]=='22'){
        //交换当前被点击的方块和空白的位置
        num[i-1][j] = num[i][j]
        num[i][j]='22'
        return //并跳出
      }
    }

    //情况2: 如果被点击的方块不在最下方,检查可否下移
    if( i < 2 ){
      //如果方块的下方是空白
      if(num[i+1][j]=='22'){
        //交换当前被点击的方块和空白的位置
        num[i+1][j] = num[i][j]
        num[i][j]='22'
        return
      }
    }

    //情况3: 如果被点击的方块不在最左侧,检查可否左移
    if(j>0){
      //如果方块的左侧是空白
      if(num[i][j-1]=='22'){
        //交换当前被点击的方块和空白的位置
        num[i][j-1] = num[i][j]
        num[i][j]='22'
        return
      }
    }

    //情况4: 如果被点击的方块不在最右侧,检查可否右移
    if(j<2){
      //如果方块的右侧是空白
      if(num[i][j+1]=='22'){
        //交换当前被点击的方块和空白的位置
        num[i][j+1] = num[i][j]
        num[i][j]='22'
        return
      }
    }
  },

  /**
   * 自定义函数--判断游戏是否成功
   */
  isWin: function () {
    //双重for循环,遍历整个数组
    for(var i=0;i<3;i++){
      for(var j=0;j<3;j++){
        //如果有方块位置不对
        if(num[i][j]!=i*10+j){
          //返回假, 游戏尚未成功
          return false
        }
      }
    }
    
    //游戏成功, 更新状态
    this.setData({isWin:true})
    return true //结束整个函数
  },

  /**
   * 自定义函数--重新开始游戏
   */
  restartGame: function () {
    //更新游戏成功状态
    this.setData({isWin:false})
    //打乱方块顺序
    this.shuffle()
    //绘制画布内容
    this.drawCanvas()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    //console.log(e.level) //pic02.jpg
    //一登录即更新游戏页--提示图
    url = '/images/'+e.level
    this.setData({url:'/images/'+e.level}) //同 url:url

    //创建画笔(画布上下文)
    this.ctx =wx.createCanvasContext('myCanvas') 

    //调用打乱方块顺序的函数
    this.shuffle()

    //绘制画布内容
    this.drawCanvas()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})